<template>
  <div class="com-container" ref="avatar_ref">
    <div class="figure-avatar">
      <el-avatar :fit="fit" :size="size" :src="figureInfo.portrait"></el-avatar>
    </div>
    <div class="desc-right">
      <p>姓名：{{ figureInfo.figureName }}</p>
      <p>性别：{{ figureInfo.sex === 1 ? '男' : '女' }}</p>
      <p>年龄：{{ figureInfo.age }}</p>
      <p>所属城市：{{ figureInfo.city }}</p>
    </div>
    <div class="desc-left">
      <p>出生时间：{{ figureInfo.birthday }}</p>
      <p>死亡时间：{{ figureInfo.deathDay }}</p>
      <p>人物类型：{{ figureInfo.types }}</p>
    </div>
  </div>
</template>

<script>
import figure from '@/api/data/figure'

export default {
  props: ['figureId'],
  watch: {
    figureId: {
      handler (newVal) {
        this.getFigureInfo()
      },
      deep: true
    }
  },
  data () {
    return {
      fit: 'contain',
      size: 200,
      figureInfo: {}
    }
  },
  mounted () {
    //增加屏幕大小变化监听的事件
    window.addEventListener('resize', this.screenAdapter)
    this.getFigureInfo()
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async getFigureInfo () {
      if (!this.figureId) {
        return
      }
      const res = await figure.getFigureInfo(this.figureId)
      this.figureInfo = res.data.figure
    },
    screenAdapter () {
      const size = (this.$refs.avatar_ref.offsetWidth / 100) * 4
      this.$refs.avatar_ref.style.fontSize = size + 'px'
    },
  }
}
</script>

<style scoped>
.figure-avatar {
  position: relative;
  width: 200px;
  height: 200px;
  top: 20px;
  left: 10px;
  float: left;
}

.com-container {
  background-color: #333333;
}

.desc-right {
  position: relative;
  color: white;
  float: left;
  top: 4%;
  left: 8%;
  line-height: 200%;
}

.desc-left {
  color: white;
  position: relative;
  float: right;
  line-height: 200%;
  top: 6%;
  right: 43%;
}
</style>
